<template>
  <div class="content">
    <div ref="home" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import Echarts from 'echarts'
import { getOrderData } from '@/api/charts.js'
import moment from 'moment'

export default {
  mounted() {
    this.getDatas()
  },
  methods: {
    async getDatas() {
      const { data } = await getOrderData({
        date: JSON.stringify([])
      })
      // 格式化时间
      data.forEach(item => {
        item.orderTime = moment(item.orderTime).format('HH:mm')
      })
      // console.log(data)
      this.renderFn(data)
    },
    renderFn(o) {
      const myChart = Echarts.init(this.$refs.home)
      const arr = []
      o.forEach(item => {
        arr.push(parseInt(Math.random() * 80 + 20))
      })
      var datalist = []
      arr.forEach((item, index) => {
        var obj2 = {
          xAxis: 3,
          label: {
            show: true,
            formatter: '90'
            // formatter: '{c}'
          }
        }
        obj2.xAxis = index
        obj2.label.show = true
        obj2.label.formatter = item + '%'
        datalist.push(obj2)
      })

      const option = {
        backgroundColor: '#f8f8f8',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#b2f4f8', '#ffcb4d', '#12fffe'],
        legend: {
          data: ['大学教育程度', '所有观众'],
          right: 10,
          top: 10,
          textStyle: {
            // color: "#000",
            fontSize: 16
          },
          icon: 'circle',
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 35
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '5%',
          top: '15%'
          // containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666',
                width: 1,
                type: 'solid'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,

              textStyle: {
                color: '#666'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '%',
            nameTextStyle: {
              color: '#000'
            },
            offset: 0,
            axisLabel: {
              formatter: '{value} %',
              color: '#666'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999',
                width: 1,
                type: 'solid'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#076969',
                width: 1
              }
            }
          }
        ],
        series: [
          {
            name: '订单量',
            type: 'line',
            data: [],
            smooth: true,
            symbolSize: 8,
            itemStyle: {
              color: 'rgb(91, 106, 174)',

              borderColor: 'rgb(91, 106, 174)',
              borderWidth: 2
            },

            lineStyle: {
              color: 'rgb(91, 106, 174)',
              width: 2
            },
            areaStyle: {
              // 区域填充样式
              normal: {
                color: new Echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(86, 132, 240, 0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(143, 186, 249, 0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            markLine: {
              label: {
                show: false
              },
              symbol: [0, 'circle'],
              // symbolSize: ,
              lineStyle: {
                normal: {
                  color: '#5684F0',
                  type: 'solid',
                  width: 2,
                  opacity: 0.3
                },
                emphasis: {
                  color: '#d9def7'
                }
              },
              data: datalist
            }
          },
          {
            name: '订单数据',
            type: 'bar',
            z: 10,
            data: [],
            barWidth: 10,
            barGap: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: '#5865A8'
              }
            },
            label: {
              show: false,
              position: 'right',
              textStyle: {
                color: '#f90'
              },
              formatter: '{c}%'
            }
          }
        ]
      }

      o.forEach(item => {
        option.xAxis[0].data.push(item.orderTime)
        option.series[0].data.push(item.orderAmount)
        option.series[1].data.push(item.orderAmount)
      })
      // 这里就是最核心的一句话，通过这里的方法渲染了页面
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding: 40px;
  box-sizing: border-box;
  background-color: #fff;
}
</style>
